<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
                <a class="navbar-brand" href="#">AMC System - Merchant Side</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <!-- <ul class="nav navbar-nav navbar-right">
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul> -->
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">商户信息<span
							class="sr-only">(current)</span></a></li>
                    <li><a href="#">商户名：</a></li>
                    <li><a href="#">Gary</a></li>
                    <li><a href="#">商户图片：</a></li>
                    <li><a href="#"><img
									src="rice.jpg"
									alt="图片无法显示" class="img-thumbnail" width=280px height=175px></a></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h1 class="sub-header">商户管理系统</h1>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <caption>菜品信息</caption>
                        <thead>
                            <tr>
                                <th>菜品ID</th>
                                <th>菜品信息</th>
                                <th>菜品价格</th>
                                <th>菜品图片</th>
                                <th>菜品类型</th>
                                <th>更新菜品信息</th>
                                <th>删除菜品信息</th>
                            </tr>
                        </thead>
                        <tbody id="foodsBody">
                            <tr>
                                <td>3b2dd906-00d5-48cd-87b1-838e9bad56d2</td>
                                <td>rice</td>
                                <td>$1.0</td>
                                <td><img src="rice.jpg" alt="图片无法显示" class="img-thumbnail" width=200px height=150px></td>
                                <td></td>
                                <td>
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">更新菜品</button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
                                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                                </div>
                                                <!-- modal body -->
                                                <div class="modal-body">
                                                    <!-- form -->
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1 ">菜品名称</label> <input type="email" class="form-control" id="foodName" placeholder="菜品名称">
                                                    </div>
                                                    <div class="form-group has-error">
                                                        <label for="exampleInputEmail1 ">菜品名称测试</label> <input type="email" class="form-control" id="foodName" placeholder="菜品名称">
                                                        <p class="help-block">菜品名称长度超过限制.</p>
                                                    </div>
                                                    <div class="form-group has-success has-feedback">
                                                        <label class="control-label" for="inputSuccess2">菜品名称绿</label>
                                                        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span>
                                                    </div>
                                                    <div class="form-group has-error has-feedback">
                                                        <label class="control-label" for="inputError2">菜品名称</label>
                                                        <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span>
                                                        <p class="help-block">菜品名称长度超过限制.</p>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleInputPassword1">菜品价格</label> <input type="password" class="form-control" id="foodPrice" placeholder="菜品价格">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleInputFile">菜品类型</label> <select class="form-control">
															<option>1</option>
															<option>2</option>
															<option>3</option>
															<option>4</option>
															<option>5</option>
														</select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="exampleInputFile">菜品图片</label> <input type="file" id="foodPic">
                                                        <p class="help-block">上传图片请不要超过2M.</p>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-primary">Save
														changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td><button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
										删除菜品</button></td>
                            </tr>
                            <tr>
                                <td>3b2dd906-00d5-48cd-87b1-838e9bad56d2</td>
                                <td>rice</td>
                                <td>$1.0</td>
                                <td><img src="rice.jpg" alt="图片无法显示" class="img-thumbnail" width=200px height=150px></td>
                                <td></td>
                                <td><button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
										更新菜品</button></td>
                                <td><button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
										删除菜品</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.jQuery ||
            document
            .write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')

    </script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="../../assets/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>
